<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>跑跑特工</title>
    <!-- 引入样式文件 -->
    <link rel="stylesheet" href="./utils/vant.css" />
    <!-- 引入 Vue 和 Vant 的 JS 文件 -->
    <script src="./utils/vue.js"></script>
    <script src="./utils/vant.js"></script>
    <!-- 引入axios（如果sendData是基于axios的） -->
    <script src="./utils/axios.js"></script>
    <!-- 自定义样式 -->
    <style>
        body {
            background-color: #f7f7f7;
        }

        .contain {
            margin-top: 20px;
            margin-bottom: 50px;

            .desc {
                margin: 10px;
                display: flex;
                justify-content: space-between;
                align-items: end;

                .left {
                    .tip {
                        margin: 10px;
                    }
                }
            }

        }
    </style>
</head>

<body>
    <div id="app">
        <!-- 刷新 -->
        <van-pull-refresh v-model="isLoading" @refresh="onRefresh">

            <van-notice-bar left-icon="volume-o" text="下面展示您的下单信息"></van-notice-bar>
            
            <div class="contain">
                <van-cell-group inset v-for="(item, index) in this.list">
                    <div class="desc">
                        <div class="left">
                            <div class="tip">乐跑id：{{ item.userId }}</div>
                            <div class="tip">公里：{{ item.km }}</div>
                            <div class="tip">次数：{{ item.times }}</div>
                        </div>
                        <div class="right">
                            <van-button round type="info" @click="Details(item)">查看详情</van-button>
                        </div>
                    </div>
                </van-cell-group>
            </div>
            <!-- 弹出详细信息 -->
            <van-dialog v-model="showDialog" title="详细信息">
                <van-cell title="开始时间" :value=this.selectedItem.startDate></van-cell>
                <van-cell title="结束时间" :value=this.selectedItem.endDate></van-cell>
                <van-cell title="金额" :value=this.selectedItem.amount/100+'元'></van-cell>
            </van-dialog>
            <!-- 底层标签页 -->
            <van-tabbar class="tabbar" v-model="active" @change="onChange" safe-area-inset-bottom>
                <van-tabbar-item icon="wap-home" name="index">主页</van-tabbar-item>
                <van-tabbar-item icon="bars" name="order">订单</van-tabbar-item>
            </van-tabbar>
        </van-pull-refresh>

    </div>
</body>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                //刷新
                isLoading: false,
                //弹出框
                showDialog: false,
                //标签页
                active: 'order',
                //数据
                list: [],
                //传递数据
                selectedItem: {} 
            }
        },
        //钩子函数，进去页面执行
        mounted() {
            this.show()
        },
        methods: {
            //下拉刷新
            onRefresh() {
                this.show()
                this.isLoading = false;
            },
            //接收数据
            async show() {
                const result = await axios('http://71hi31ml3628.vicp.fun/order/selectByOpenid', {
                    headers: {
                        'Token': `${localStorage.getItem('lptoken')}`
                    }
                })
                if (result.status === 200) {
                    this.list = result.data.data
                    this.$notify({ type: 'success', message: '数据接收成功' })
                } else {
                    this.$notify({ type: 'danger', message: '数据接收失败' })
                }
            },
            //查看详情
            Details(item) {
                this.selectedItem = item;
                this.showDialog = true
            },
            //标签页切换
            onChange(index) {
                location.href = `./${index}.html`
            }
        },
    })
</script>

</html>